<template>
  <div class="batchTable" v-if="batchData.length>0">
    <a-table ref="formTable" bordered :columns="batchColumns" :data-source="batchData" :pagination="false">
      <template v-for="col in ['processName', 'taskSource', 'startUserName', 'startOrgName', 'keyword', 'durationInMillis', 'reject', 'opinion', 'action']" :slot="col" slot-scope="text, record, index">
        <div :key="col" class="form-item">
          <BaseInput :class="record['reject'] * 1 == 0 ? 'mandatory' : ''" :maxLength="300" v-if="col == 'opinion'" v-model="record[col]"></BaseInput>
          <span v-else-if="col == 'taskSource'">{{ record[col] | taskSourceFilter }}</span>
          <span v-else-if="col == 'reject'">
            <a-radio-group v-model="record[col]">
              <a-radio :value="1">通过</a-radio>
              <a-radio :value="0"> 驳回</a-radio>
            </a-radio-group>
          </span>
          <span v-else-if="col == 'action'">
              <a @click="consultFn(record)">征询</a>
               <a-dropdown>
              <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                更多<a-icon type="down" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a @click="complaint(record)" v-if="!record.isTranfter">转办</a>
                </a-menu-item>
                <a-menu-item>
                  <a @click="removeApproval(record, index)">移除</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </span>
          <span v-else>{{ record[col] }}</span>
        </div>
      </template>
      <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
    </a-table>
    <div class="batchTable-btn">
      <a-button @click="closePage">取消</a-button>
      <a-button type="primary" @click="confirmBatch">提交</a-button>
    </div>
    <div class="batch-tab">
      <span :class="item.taskId == taskId ? 'active' : ''" v-for="(item, index) in batchData" :key="index" @click="clickTab(item)">{{item.processName}}</span>
    </div>
    <!-- 意见征询模态框 -->
    <SelectConsultation :visible.sync="selectConsultationVisible" :info="info" @refresh="getData" :sendTaskId="sendTaskId"></SelectConsultation>
    <!-- 转办人选择模态框 -->
    <SelectTurnTo :visible.sync="selectTurnToVisible" :task-name="taskName" :info="info" :isClose="false" @removeApproval="removeApprovalFn"  :complaintTaskId="complaintTaskId"/>
    <!-- 转办人选择模态框 -->
  </div>
</template>
<script>
import { batchColumns } from './model.js'
import { BUSINESS_SOURCE_MAP } from '@/config/businessConfig.js'
import SelectConsultation from './consultation/SelectConsultation'
import SelectTurnTo from './consultation/SelectTurnTo'
import Vue from 'vue'
import Bus from '@/tool/Bus.js'
const taskSourceMap = BUSINESS_SOURCE_MAP
export default {
  name: 'batchTable',
  components: {
    SelectConsultation,
    SelectTurnTo
  },
  props: {},
  filters: {
    taskSourceFilter(type) {
      return taskSourceMap[type]
    }
  },
  data() {
    return {
      // 表头
      batchColumns,
      // 列表数据
      batchData: JSON.parse(localStorage.getItem('approvalArr')),
      // 列表加载中
      loading: false,
      businessId: null,
      taskId: null,
      // 意见征询模态框显示隐藏
      selectConsultationVisible: false,
      // 转办人模态框显示隐藏
      selectTurnToVisible: false,
      // 登录人信息
      info: Vue.getAcloudProvider().getUserInfo(),
      taskName: '',
      //转办人的taskid
      complaintTaskId: null,
      //征询的id
      consultprocInstId: null,
      //点击意见征询id
      sendTaskId:null,
    }
  },
  created() {
    let { businessId, taskId } = this.$route.query
    this.businessId = businessId
    this.taskId = taskId
  },
  methods: {
    confirmBatch() {
      //需要必填的数据
      //是否填写状态
      let isStatus = this.batchData.every((item) => item.hasOwnProperty('reject'))
      if (!isStatus) {
        this.$message.error('请完善表格数据')
        return
      }
      let mandatoryArr = this.batchData.filter((item) => item.reject * 1 == 0)
      //校验
      let flag = mandatoryArr.every((item) => item.opinion)
      if (!flag) {
        this.$message.error('请完善表格数据')
        return
      } else {
        this.$emit('completeTaskBathFn', this.batchData)
      }
    },
    //征询
    consultFn(str){
      this.sendTaskId = str.taskId;
      this.selectConsultationVisible = true
    },
    clickTab(item) {
      //页面路由跳转参数
      const query = {
        taskDefKey: item.taskDefKey,
        businessType: item.businessType,
        businessId: item.businessId,
        id: item.businessId,
        procInstId: item.procInstId,
        name: encodeURIComponent(item.taskName),
        processName: encodeURIComponent(item.processName),
        taskId: item.taskId,
        durationInMillis: item.durationInMillis, //滞留时间
        type: 'approve' // 部分详情页依赖这个参数做相关判断
      }
      if (item.detailUrl) {
        query['detailUrl'] = encodeURIComponent(item.detailUrl)
      }
      this.businessId = item.businessId
      this.taskId = item.taskId
      this.consultprocInstId = item.procInstId
      this.$router.push({ path: '/process/audit', query })
      this.$emit('clickTabRouter');
    },
    //移除审批
    removeApproval(item, index) {
      this.batchData.splice(index, 1)
      localStorage.setItem('approvalArr', JSON.stringify(this.batchData))
      //默认选中被移除，就默认跳转第一个
      if (item.taskId == this.taskId && this.batchData.length > 1) {
        this.clickTab(this.batchData[0])
      }
      //数据移除完毕，关闭页面
      if (this.batchData.length == 0) {
        this.$close()
      }
    },
    //转办
    complaint(item) {
      this.selectTurnToVisible = true
      this.taskName = item.taskName
      this.complaintTaskId = item.taskId
    },
    //转办成功
    removeApprovalFn() {
      let index = this.batchData.findIndex((item) => item.taskId === this.complaintTaskId)
      this.batchData.splice(index, 1)
      //移除数据
      localStorage.setItem('approvalArr', JSON.stringify(this.batchData))
      //默认选中被移除，就默认跳转第一个
      if (this.taskId == this.complaintTaskId && this.batchData.length > 1) {
        this.clickTab(this.batchData[0])
      }
      //数据移除完毕，关闭页面
      if (this.batchData.length == 0) {
        this.$close()
      }
      this.complaintTaskId = null
    },
    getData() {
      Bus.$emit('tabChange', this.consultprocInstId)
    },
    closePage(){
        this.$close()
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.batchTable {
  @{deep} .mandatory input {
    border-color: #e4ac0b;
    background-color: #fff9e8;
  }
  .batch-tab {
    padding: 0 20px;
    margin-bottom: 20px;
    span {
      display: inline-block;
      padding: 0 30px;
      line-height: 32px;
      border: 1px solid #d7d7d7;
      border-radius: 3px;
      font-size: 14px;
      margin-bottom: 5px;
      cursor: pointer;
      &.active {
        background-color: #40a9ff;
        border-color: #40a9ff;
        color: #fff;
      }
    }
  }
}
.batchTable-btn {
  display: flex;
  justify-content: flex-end;
  margin: 20px;
  .ant-btn {
    margin-right: 20px;
    &:nth-last-of-type(1) {
      margin-right: 0;
    }
  }
}
</style>
